/* all.css */
*{ margin:0; padding:0; list-style:none; box-sizing: border-box;}
body{ padding-top: 116px; font:14px/26px "Microsoft YaHei", "微软雅黑", "宋体", Arial; color: #666; -webkit-font-smoothing:antialiased; background:#fff; overflow-x: hidden;}
img{ border:0; width: 100%; vertical-align: middle;}
a{ text-decoration:none; color:#333;}
a:focus{ outline:none;}
em{ font-style: normal;} input{ outline: none;}

/* Clearfix */
.clearfix:after, .clearfixlist li:after, .container:after, .form-group:after{ content:"\0020"; display:block; clear:both; height:0; font-size:0;}
.clearfix, .clearfixlist li, .container, .form-group{ zoom:1;}
.show-pad, .show-phone{ display: none;}
.clear{ clear:both; display:block;}
.fl{ float: left;} .fr{ float: right;}

.flex-row, .flex-title{ -webkit-display: flex; -moz-display: flex; -o-display: flex; display: flex; flex-direction: row;}
.flex-col, .remark{ -webkit-display: flex; -moz-display: flex; -o-display: flex; display: flex; flex-direction: column;}
.around{ justify-content: space-around; align-items: center;}
.between{ justify-content: space-between; align-items: center;}
.center, .remark{ justify-content: center; align-items: center;} .wrap{ flex-wrap: wrap;}
.text-center{ text-align: center;} .text-right{ text-align: right;}
.vertical{ display: table-cell; vertical-align: middle;}
.text-ellipsis, .name{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.text-upper{ text-transform: uppercase;}

.circle, .portrait, .portrait img{ -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.rect-8{ -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px;}
.pic img, .logo img, .portrait img{ width: 100%; height: 100%;}

.trans, .remark{ -webkit-transition: all 0.38s ease; -moz-transition: all 0.38s ease; transition: all 0.38s ease;}
.scale{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all ease 0.38s;}
a:hover .scale{ -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08);}

.scroll-top{ position: fixed; z-index: 78; bottom: 52px; right: 28px; width: 40px; height: 40px; opacity:0; -webkit-transform:translateX(100%) rotate(360deg); transform:translateX(100%) rotate(360deg); transition:all .5s ease; cursor: pointer; background: url(../images/scroll-top.png) no-repeat 0 0; background-size: 100% 100%;}
.scroll-top.rollIn{ opacity:1; -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg); transition:all .5s ease;}
.youlianMw{    
background: url(../images/mw_logo_hover.png) no-repeat right center;color:#fff;
    padding-right: 92px;}
.youlianMw:hover{    
background: url(../images/mw_logo.png) no-repeat right center;color:#fff;
    padding-right: 92px;}
/* Bounce To Right */
.bounce-to-right{ display: inline-block; position: relative; vertical-align: middle;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden;
  backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color; transition-property: color;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.bounce-to-right:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: #f7ca15;
  -webkit-transform: scaleX(0); transform: scaleX(0);
  -webkit-transform-origin: 0 50%; transform-origin: 0 50%;
  -webkit-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.bounce-to-right:hover, .bounce-to-right:focus, .bounce-to-right:active{ color: #fff;}
.bounce-to-right:hover:before, .bounce-to-right:focus:before, .bounce-to-right:active:before{
  -webkit-transform: scaleX(1); transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.pagination{ padding: 18px 0;}
.pagination a{ display: inline-block; padding: 3px 12px; color: #463d3a; background: #eee;}
.pagination a:hover, .pagination .active{ color: #fff; background: #c7000b;}

@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
@media (min-width:1280px){.container{width:1230px}}

.container{ margin: 0 auto;}
.wrapper{ display: none; position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.58)}
.icon, .menu, .player{ background: url(../images/sprite.png) no-repeat 0 -9999em;}
.phone{ background-position: 0 10px;}
.player{ padding-left: 28px; background-position: 0 -208px;}

/* header */
.logo{ display: block; width: 65px; height: 108px;}
.header{ position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 138px; -webkit-box-shadow: 0 3px 8px #e5e5e5; -moz-box-shadow: 0 3px 8px #e5e5e5; box-shadow: 0 3px 8px #e5e5e5; background: #fff;}
.header .container{ position: relative;}
.header .logo{ position: absolute; top: 12px; left: -80px;}
.header .phone{ position: absolute; top: 38px; right: -198px; padding-left: 38px; font-size: 24px; font-weight: bold; font-style: italic; line-height: 52px; color: #c7000b;}

.nav-list{ width: 100%; border-left: 1px solid #e7e7e7; margin: 0 auto;}
.nav-list .item{ float: left; position: relative; width: 16.6%; border-right: 1px solid #e7e7e7; text-align: center;}
.nav-list .target{ display: block; position: relative; padding: 48px 0 38px; font-size: 16px; color: #191919;}
.nav-list .en{ font-size: 11px; color: #a2a2a2; text-transform: uppercase;}
.nav-list .target:hover, .nav-list .active .target, .nav-list .target:hover .en, .nav-list .active .en{ color: #fff; background: #c7000b;}
.sublist{ display: none; position: absolute; z-index: 999; top: 100%; left: 0; width: 100%; background: rgba(199,0,11,.92);}
.sublist li{ float: none; width: 100%; border-top: 1px solid #fff; font-size: 14px; line-height: 48px;}
.sublist a{ display: block; color: #fff;} .sublist a:hover{ background: #ffb628;}

.footer{ padding: 0px 0; border-top: 5px solid #ffb628; font-size: 13px; color: #cecece; background: #1b1b1b;}
.footer .container{ width: 78%; max-width: 738px;}
.footer .logo{ width: 154px; height: auto; margin: 0 auto 32px;}
.footer a, .copyright{ color: #8a8a8a;}
.footer .line{ margin: 0 12px;} .footer a:hover{ color: #c7000b;}
.flex-footer{ position: relative; padding-top: 15px; height: 88px; border-top: 1px solid #bfbfbf; margin-top: 15px; color: #eaeaea;}
.flex-footer .qrcode{ position: absolute; top: 15px; right: 0; width: 72px; height: 72px;}
.flex-footer .info{ margin-right: 88px;}
.flex-footer span{ margin-right: 18px;}
.copyright{ padding: 10px; font-size: 12px; text-align: center; background: #0b0b0b;}
.copyright span{ margin-right: 8px;}

.mod .pic{ overflow: hidden;}
.mod .bd{ padding: 118px 0; background-repeat: no-repeat; background-position: center top; background-size: 100% 100%;}
.mod-pro .bd, .mod-news .bd{ background-image: url(../images/bg-pink.jpg);}
.mod-video .bd{ padding: 88px 0 48px; background-image: url(../images/bg-green.jpg);}
.flex-title{ padding: 60px 0; font-size: 21px; color: #1d1d1d;}
.flex-title img{ width: auto; height: 18px;}
.flex-title .line{ width: 2px; height: 26px; margin: 0 12px; background: #111;}
.btn-more{ display: block; width: 110px; height: 38px; line-height: 38px; color: #fff; text-align: center; background: #ffb628;}

.prev{ background-position-y: -36px;} .next{ background-position-y: -86px;}
.swiper-banner img{ width: 100%; height: 100%;}
.swiper-banner .icon, .mod .icon{ position: absolute; z-index: 8; top: 38%; width: 42px; height: 42px; border-radius: 50%; background-color: rgba(0,0,0,.38);}
.swiper-banner .icon:hover, .mod .icon:hover{ background-color: #f7ca15;}
.swiper-banner .icon{ top: 48%;} .swiper-banner .prev{ left: 8px;} .swiper-banner .next{ right: 8px;}

.mod .container{ position: relative;}
.mod .btn-more{ position: absolute; top: 54px; right: 0;}
.mod .prev{ left: -48px;} .mod .next{ right: -48px;}
.mod .remark{ opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,182,40,.85);}
.mod .name{ font-size: 16px; color: #353535;}
.mod a:hover .name{ color: #c7040f;}
.mod a:hover .remark{ opacity: 1;}
.swiper-product, .swiper-video{ text-align: center;}
.swiper-product .pic, .swiper-video .pic{ position: relative; width: 100%; border: 1px solid #f0cc3c; margin-bottom: 20px;}
.swiper-product .add, .prolist .add{ width: 34px; height: 34px; border:0px solid #fff; font-size: 24px; line-height: 30px; color: #fff; text-align: center; }

.swiper-video .remark{ color: #fff;}
.swiper-video .txt{ margin-bottom: 6px; font-size: 17px; font-weight: bold;}
.swiper-video .player{ background-position-y: -212px;}

.mod-news .bd{ padding-bottom: 78px;}
.press-list .item{ float: left; position: relative; width: 50%; margin-bottom: 40px;}
.press-list .pic{ position: absolute; top: 20px; right: 35px; width: 302px; height: 180px; border: 4px solid #fff;}
.press-list .info{ width: 70%; height: 220px; padding: 20px 170px 20px 20px; font-size: 13px; color: #858484; background: #fff;}
.press-list .name{ font-size: 15px; font-weight: bold; color: #333;}
.press-list .txt{ height: 78px; margin: 8px 0; overflow: hidden;}
.press-list .date{ font-size: 12px; color: #686868;}
.press-list .more{ color: #222;}
.press-list .item:nth-child(2n){ padding-left: 35px;}
.press-list .item:nth-child(2n) .pic{ right: 0;}
.press-list .item:last-child{ margin-bottom: 0;}
.press-list a:hover .info{ background: #f7ca15;}
.press-list a:hover .info, .press-list a:hover .name, .press-list a:hover .date, .press-list a:hover .more{ color: #fff;}

/* init */
.mod-crumb, .mod-crumb a{ color: #191919;}
.mod-crumb{ padding: 15px 0; text-align: right; background: #f4f4f4;}
.mod-crumb a:hover, .mod-crumb .green{ color: #c7000b;}

.init .container{ position: relative; z-index: 68;}
.aside{ position: absolute; top: -104px; left: 0; width: 265px;}
.aside-nav .hd{ padding: 18px; color: #fff; background: #c7000b;}
.aside-nav .china{ font-size: 32px; font-weight: bold; line-height: 42px;}
.aside-nav .en{ text-transform: uppercase;}
.aside-nav .bd{ padding: 18px; background: #e0e0e0;}
.aside-list li{ margin-bottom: 10px; font-size: 15px;}
.aside-list li:last-child{ margin: 0;}
.aside-list a{ display: block; position: relative; padding: 10px 10px 10px 38px; color: #182329; background: #fff;}
.aside-list a:after{ content: '\0020'; display: block; position: absolute; top: 12px; left: 18px; width: 5px; height: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #1c2731;}
.aside-list a:hover, .aside-list .active a{ color: #fff; background: #c7000b;}
.aside-list a:hover:after, .aside-list .active a:after{ background: #fff;}
.aside-contact{ padding: 28px 32px 48px; margin: 20px 0; color: #191919; background: url(../images/bg-contact.jpg) no-repeat center top; background-size: 100% 100%;}
.aside-contact .name{ font-size: 16px;}

.main{ margin-left: 328px; padding-bottom: 18px;}
.flex-mtitle{ padding: 18px 0; border-bottom: 1px solid #e7e7e7; margin-bottom: 35px;}
.flex-mtitle .title{ font-size: 17px; color: #1c2931;}
.switch-nav .btn{ display: inline-block; width: 102px; height: 38px; border: 1px solid #b8b8b8; margin-left: 18px; -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; line-height: 36px; color: #7f7f7f; text-align: center;}
.switch-nav .btn:hover{ border-color: #c7000b; color: #c7000b;}

.init .pic{ position: relative; overflow: hidden;}
.init .remark{ position: absolute; top: 0; left: 0; width: 100%; font-size: 15px; color: #fff; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); background: rgba(8,8,8,.85);}
.init a:hover .remark{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1);}

.video-list li{ float: left; width: 48%; margin-bottom: 28px; text-align: center;}
.video-list li:nth-child(2n+1){ float: right;}
.video-list .pic{ margin-bottom: 18px;} .video-list .remark{ text-decoration: underline;}
.video-list .name{ font-size: 16px; color: #1c2931;}
.video2-list .remark{ text-decoration:none; background: rgba(199,0,11,.85);}
.video-list a:hover .name, .prolist a:hover{ color: #c7000b;}

.prolist li{ width: 32%; margin-bottom: 28px; font-size: 16px; text-align: center;}
.prolist .pic{ border: 1px solid #f1ce3e; margin-bottom: 28px;}
.prolist .remark{ background: rgba(255,182,40,.85);}

.news-list li{ margin-bottom: 12px;}
.news-list a{ display: block; position: relative; padding: 16px 12px; color: #676767; background: #f1f1f1;}
.news-list .pic{ position: absolute; top: 16px; left: 12px; width: 178px; height: 134px;}
.news-list .info{ height: 134px; margin-left: 198px; font-size: 13px;}
.news-list .name{ font-size: 16px; font-weight: bold; line-height: 32px; color: #1b1b1b;}
.news-list .txt{ height: 40px; margin: 10px 0 16px; line-height: 20px; overflow: hidden;}
.news-list .date{ color: #a0a0a0;}
.news-list .more{ font-size: 12px; color: #242424;}
.news-list a:hover, .news-list a:hover .name, .news-list a:hover .date, .news-list a:hover .more{ color: #fff;}
.news-list a:hover{ background: #c7000b;}

.main-news .title{ padding: 24px 0 6px; font-size: 18px; text-align: center;}
.main-news .subtitle{ margin-bottom: 8px; color: #333; text-align: center;} .main-news .subtitle span{ margin-right: 8px;}
.news-more{ margin-bottom: 18px;}
.news-more .caption{ border: 0 none; margin-bottom: 8px; font-size: 20px; color: #111;}
.news-more .name{ display: block; position: relative; height: 40px; padding-right: 78px; border-bottom: 1px dashed #dbdbdb; line-height: 38px; color: #191919;}
.news-more .date{ position: absolute; top: 0; right: 0; font-size: 13px;}
.news-pagination{ position: relative; padding: 10px 130px 10px 18px; border: 1px solid #cdcdcd; background: #f7f7f7;}
.news-pagination a{ width: 68%; height: 26px; margin-bottom: 10px; font-size: 15px; color: #242424;}
.news-pagination span{ float: left; color: #616161;}
.news-pagination .btn-back{ position: absolute; top: 20px; right: 8px; width: 108px; height: 38px; padding-left: 36px; font-size: 13px; color: #fff; line-height: 38px; background-position: 6px -170px; background-color: #c7000b; background-size: 28px 280px;}
.news-pagination .btn-back:hover{ color: #fff;}
.news-more a:hover, .news-pagination a:hover{ color: #c7000b;}

.init-detail .main{ padding-bottom: 58px; font-size: 15px; line-height: 28px; color: #191919;}
.init-detail img{ max-width: 100%; width: auto; height: auto;}
.init-detail .pic, .init-detail .txt{ margin-bottom: 28px;}
.init-detail .pic{ text-align: center;}

.init-contact .name{ margin-bottom: 12px; font-size: 18px; font-weight: bold;}
.init-contact .txt{ margin-bottom: 8px;}
.init-contact .map{ margin-top: 18px;}

.form-online{ width: 80%; margin: 0 auto;}
.form-online .group{ position: relative; padding-left: 56px; margin-bottom: 12px;}
.form-online .attr{ position: absolute; top: 3px; left: 0;}
.form-online .control{ width: 100%; padding: 5px 8px; border: 1px solid #ddd; line-height: 24px;}
.form-online textarea{ height: 120px;}
.form-online .btn-submit{ width: 120px; height: 36px; border: 0 none; margin-left: 56px; line-height: 36px; color: #fff; background: #c7000b;}
@media(max-width: 1600px){
  .header .phone{ right: 0; padding-left: 28px; font-size: 18px; background-position: 0 15px; background-size: 28px 280px;}
  .header .logo{ left: 0;}
  .nav{ margin-left: 78px; margin-right: 148px;}
  .nav-list .target, .sublist{ font-size: 15px;}
  
  .mod .bd{ padding: 58px 0;} .mod .next{ right: 0;} .mod .prev{ left: 0;}
  .mod .swiper-container{ margin: 0 48px;}
  .mod-news .bd{ padding-bottom: 38px;}
  .press-list .pic{ width: 248px; height: 148px;}
  .press-list .info{ height: 186px; padding-right: 126px;}
  .press-list .txt{ height: 52px;}

  .aside-nav .china{ font-size: 28px;}
  .main{ margin-left: 288px;}
}

@media(max-width: 992px){
  .header .phone{ display: none;}
  .nav{ margin-right: 0;}
  .flex-title{ padding: 38px 0;}
  .mod-news .btn-more{ top: 32px; right: 8px;}
  .press-list .item{ width: 100%; padding: 0 35px;}
  .press-list .item:nth-child(2n) .pic{ right: 35px;}
  .press-list .info{ width: 78%;}

  .aside-nav .china{ font-size: 24px;}
  .flex-mtitle{ padding: 12px 0;}
  .flex-mtitle, .prolist li, .video-list li{ margin-bottom: 18px;}
  .prolist .pic, .video-list .pic{ margin-bottom: 12px;}
}
@media screen and (max-width: 768px){
    .show-pad{ display: block;} .hide-pad{ display: none;}
    body{ padding-top: 80px;} .scroll-top{ bottom: 18px; right: 8px;}
    .container{ padding: 0 8px;text-align:left}
    .header{ height: 78px; padding: 2px 0;}
    .header .logo{ top: 2px; left: 12px; width: 40px; height: 68px;}
    .menu{ float: right; width: 48px; height: 48px; margin-top: 12px; background-position: right -88px; background-size: 28px 280px;}
    .nav{ position: fixed; z-index: 88; left: -50%; top: 0; width: 48%; height: 100%; padding: 0; margin: 0; background: #fff;}
    .nav-list, .nav-list .item{ border: 0 none;}
    .nav-list{ width: 100%; padding: 78px 0 28px; margin: 0;}
    .nav-list .item{ float: none; width: 100%;}
    .nav-list .target{ padding: 8px 0;}
    .footer .container{ width: 92%;}
    .footer .between{ display: block;}
  
    .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 0;}
    .swiper-pagination-bullet{ width: 12px; height: 12px;}
    .mod .next{ right: 6px;} .mod .prev{ left: 6px;}
    .flex-title{ padding: 28px 0; font-size: 18px;}
    .flex-title img{ height: 15px;}
    .swiper-product .pic, .swiper-video .pic{ margin-bottom: 12px;}
    .press-list .item{ padding: 0 8px; margin-bottom: 20px;}
    .press-list .item:nth-child(2n){ padding: 0 8px;}
    .press-list .pic, .press-list .item:nth-child(2n) .pic{ right: 8px;}

    .main{ margin: 0;}
    .aside-nav .hd, .aside-nav .bd{ position: fixed; z-index: 88; top: 169px;}
    .aside-nav .hd{ right: 18px; width: 46px; height: 46px; padding: 5px 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer;}
    .aside-nav .en, .aside-contact{ display: none;}
    .aside-nav .china{ font-size: 13px; line-height: 17px; text-align: center;}
    .aside-nav .bd{ display: none; right: 68px; min-width: 158px; padding: 6px;}
    .aside-list li{ margin-bottom: 6px;} .aside-list a{ padding: 2px 10px 2px 28px;}
    .aside-list a:after{ top: 12px; left: 13px;}

    .flex-mtitle{ margin-bottom: 28px;} .prolist li, .prolist .pic{ margin-bottom: 18px;}
    .init-detail .main{ padding-bottom: 18px;}
    .init-detail .pic, .init-detail .txt{ margin-bottom: 18px;}
}
@media (max-width: 480px){
  .show-phone{ display: block;} .hide-phone{ display: none;}
  .footer{ padding: 18px 0; text-align: center;}
  .footer .container{ width: 100%;}
  .footer .line{ margin: 0 5px;}
  .footer .logo{ margin-bottom: 15px;}
  .flex-footer{ height: auto; padding-top: 10px; margin-top: 10px;}
  .flex-footer .info{ margin: 0;}
  .flex-footer span{ display: inline-block; margin: 0;}
  .flex-footer .qrcode{ position: static; width: 88px; height: 88px; margin: 12px auto 0;}

  .mod .bd{ padding: 28px 0;} .flex-title{ padding: 20px 0;} .flex-title img{ height: 12px;}
  .next{ background-position: center -91px;} .prev{ background-position: center -41px;}
  .swiper-banner .icon, .mod .icon{ width: 32px; height: 32px;}
  .swiper-banner .icon{ top: 38%;} 
  .mod .swiper-container{ margin: 0 38px;}
  .mod-news .btn-more{ display: none;}
  .press-list .pic{ position: static; width: 100%;}
  .press-list .info{ width: 100%; height: auto; padding: 12px;}

  .pagination{ padding: 8px 0 24px;}
  .mod-crumb{ padding: 10px 0; font-size: 13px;}
  .flex-mtitle{ padding: 13px 0; margin-bottom: 18px;}
  .switch-nav .btn{ width: 88px; height: 32px; margin-left: 0; line-height: 30px;}
  .init-detail .pic, .init-detail .txt{ margin-bottom: 12px;}
  .video-list li, .prolist li{ width: 49%;}
  .news-list a{ padding: 10px;}
  .news-list .pic{ left: 10px; top: 10px; width: 128px; height: 96px;}
  .news-list .info{ height: 96px; margin-left: 138px;}
  .news-list .name{ font-size: 15px;} .news-list .txt{ margin: 0;}
  .news-pagination{ padding: 10px; margin-bottom: 48px;}
  .news-pagination .btn-back{ top: auto; bottom: -50px; right: 0; margin: 0;}
}